<!-- src/layouts/TabLayout.vue -->
<template>
	<div class="h-screen overflow-hidden flex md:flex-row flex-col ">
		<!-- PC端：侧边导航栏 -->
		<SideNav class="hidden md:block" />

		<!-- 主内容区 -->
		<main
			class="flex-1 overflow-y-auto"
			style="-webkit-overflow-scrolling: touch"
		>
			<!-- 
        这个 router-view 用于渲染 Home, Messages, Me 等子页面。
        注意：它没有被 <transition> 包裹！
      -->
			<router-view v-slot="{ Component }">
				<!-- 
          include 是一个字符串或正则表达式，匹配要缓存的组件的 name。
          请确保你的路由定义中 Home, Messages, Me 都有正确的 name 属性。
        -->
				<keep-alive :include="['Home', 'Messages', 'Me']">
					<component :is="Component" />
				</keep-alive>
			</router-view>
		</main>

		<!-- 移动端：底部Tab栏 -->
		<TabBar class="md:hidden" />
	</div>
</template>

<script setup lang="ts">
// 假设你已经把 SideNav 和 TabBar 拆分成了组件
import SideNav from "@/components/layout/SideNav.vue";
import TabBar from "@/components/layout/TabBar.vue";
</script>
